import { screen } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import { append } from 'ramda';
import { Route, Routes } from 'react-router-dom';

import { RoutesConfig } from '../../../../app/config/routes';
import { fill{{ pascalCase name }}ListQuery } from '../../../../mocks/factories/{{ camelCase name }}';
import { createMockRouterProps, render } from '../../../../tests/utils/rendering';
import { {{ pascalCase name }}List } from '../{{ camelCase name }}List.component';

describe('{{ pascalCase name }}List: Component', () => {
  const routePath = ['{{ camelCase name }}', 'list'];
  const addRoutePath = ['{{ camelCase name }}', 'add'];

  const Component = () => (
    <Routes>
      <Route path={RoutesConfig.getLocalePath(routePath)} element={<{{ pascalCase name }}List />} />
      <Route path={RoutesConfig.getLocalePath(addRoutePath)} element={<span>{{ pascalCase name }} add page mock</span>} />
    </Routes>
  );

  it('should render all items', async () => {
    const routerProps = createMockRouterProps(routePath);
    const requestMock = fill{{ pascalCase name }}ListQuery();

    render(<Component />, { routerProps, apolloMocks: append(requestMock) });

    expect(await screen.findByText(/Loading .../i)).toBeInTheDocument();
    expect(await screen.findByText('First item')).toBeInTheDocument();
    expect(await screen.findByText('Second item')).toBeInTheDocument();
  });

  it('should render link to add new item form', async () => {
    const routerProps = createMockRouterProps(routePath);
    const requestMock = fill{{ pascalCase name }}ListQuery();

    render(<Component />, { routerProps, apolloMocks: append(requestMock) });

    await userEvent.click(await screen.findByText(/add/i));

    expect(screen.getByText('{{ pascalCase name }} add page mock')).toBeInTheDocument();
  });
});
